<div class="slide-dialog-header">
	<h2>{{title}}</h2>
	<div class="slide-dialog-toolbar">
		<ul>
			<li><span class="ui-btn slide-dialog-close" ng-click="close(false)"><i class="fa fa-remove"></i></span></li>
		</ul>
	</div>
</div>
<div class="slide-dialog-body x-slide-dialog-body">
	<form name="form" novalidate="novalidate" ng-submit="submit(form.$valid);">
		<div class="x-data-panel-fixed">
			<div class="x-steps">
				<!-- <div class="x-step">创建任务</div>
				<div class="x-step active">配置规则</div>
				<div class="x-step">任务设置</div>
				<div class="x-step">定时设置</div> -->
				<div class="x-step" ng-repeat="state in vm.states track by $index" ng-class="{'active': $index <= index}" ng-click="vm.step($index)">{{state.title}}</div>
			</div>
			<div class="x-data-panel-body">
				<div class="x-group">
					<div class="x-group-header">
						<h3>数据任务名称</h3>
					</div>
					<div class="x-group-body">
						<div class="data-form">
							<dl>
								<input type="text" ng-model="data.name" name="name" required class="x-ipt" placeholder="请输入任务名称" style="width:42%;" />
								<span class="x-error" ng-if="interacted(form.name)" ng-messages="form.name.$error"><span ng-message="required">名称不能为空</span></span>
							</dl>
							<div class="form-delimiter" ng-if="!vm.ext">
								<!-- <em>点击右侧展开更多折叠项</em> -->
								<em ng-click="vm.ext=true">点击展开更多折叠项</em>
								<span class="delimiter-arrow" ng-click="vm.ext=true"></span>
							</div>
							<dl ng-if="vm.ext">
								<textarea ng-model="data.desc" name="desc" class="x-ipt" ng-maxlength="255" rows="8" placeholder="请输入任务描述"></textarea>
							</dl>
						</div>
					</div>
				</div>
				<div class="x-group">
					<div class="x-group-header">
						<h3>配置规则</h3>
					</div>
					<div class="x-group-body">
						<!-- <div class="data-tabs">
							<div class="data-tab-nav">
								<ul>
									<li class="active"><em>表名一</em><i class="fa fa-times-circle"></i></li>
									<li><em>表名二</em><i class="fa fa-times-circle"></i></li>
								</ul>
							</div>
						</div> -->
						<div class="data-tabs">
							<div class="data-tab-nav">
								<ul>
									<li ng-repeat="task in data.tasks track by $index" ng-class="{'active': $index == vm.index}" ng-click="activeTask($index)"><em>{{task[vm.from].table}}</em><i class="fa fa-times-circle" ng-if="data.tasks.length > 1" ng-click="removeTask($index)"></i></li>
									<li class="tab-nav-add" ng-click="addTask()" ng-if="data.tasks.length < 5"><i class="fa fa-plus-circle"></i>添加配置</li>
								</ul>
							</div>
						</div>
						<div class="data-form data-flex">
							<table cellspacing="0" cellpadding="0">
								<tbody>
									<tr>
										<td><button type="button" class="flex-button" ng-class="{'active': data.tasks[vm.index][vm.from].source}" ng-click="dataSource()"><i class="fa fa-database"></i><em>{{data.tasks[vm.index][vm.from].source||'选择数据源'}}</em></button></td>
										<td><div class="flex-box"><i class="fa fa-globe"></i></div></td>
										<td>
											<span class="flex-toolbar">
												<button type="button" class="flex-button" ng-class="{'active': data.tasks[vm.index][vm.to].source}" ng-click="dataLocalSource()"><i class="fa fa-database"></i><em>{{data.tasks[vm.index][vm.to].source||'选择目标'}}</em></button>
												<button type="button" class="flex-ico-button" ng-click="setTableRules()" ng-if="data.tasks[vm.index][vm.to].source"><i class="fa fa-plus-circle"></i>表规则</button>
											</span>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
						<div class="data-form data-area" ng-if="data.tasks[vm.index][vm.from].table&&data.tasks[vm.index][vm.to].table||data.tasks[vm.index][vm.to].rules">
							<table cellspacing="0" cellpadding="0">
								<tbody>
									<tr>
										<td class="text-align-left">
											<!-- <h3><i class="fa fa-table"></i> 源表：</h3>
											<div class="x-data-types">
												<span class="x-data-type active">表名一</span>
												<span class="x-data-type">表名二</span>
											</div> -->
											<div class="form-title" ng-if="data.tasks[vm.index][vm.from].table&&data.tasks[vm.index][vm.to].table">
												<h2>字段映射</h2>
												<p>请配置 源表：<i class="fa fa-table"></i> <span class="text-info">{{data.tasks[vm.index][vm.from].table}}</span> 和 目标表：<i class="fa fa-table"></i> <span class="text-info">{{data.tasks[vm.index][vm.to].table}}</span> 之间的映射规则</p>
											</div>
										</td>
										<td class="text-align-right">
											<!-- <h3><i class="fa fa-table"></i> 目标表：<span class="text-info">表名</span></h3> -->
											<div class="x-data-types">
												<!-- <span class="x-data-type type-1 active"><em>验</em>规则名称</span>
												<span class="x-data-type type-3 active"><em>替</em>规则名称</span>
												<span class="x-data-type type-2 active"><em>比</em>规则名称</span> -->
												<span class="x-data-type type-{{rule.type}} active" ng-repeat="rule in data.tasks[vm.index][vm.to].rules track by $index"><em>{{rule.type | mapping:vm.fields.types:"id"}}</em>{{rule.name}}</span>
											</div>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
						<!-- <div class="data-form data-area">
							<div class="x-data-types">
								<span class="x-data-type type-1 active"><em>验</em>规则名称</span>
								<span class="x-data-type type-3 active"><em>替</em>规则名称</span>
								<span class="x-data-type type-2 active"><em>比</em>规则名称</span>
								<span class="x-data-add"><i class="fa fa-plus-circle"></i> 选择表规则</span>
							</div>
						</div> -->
						<div grid-view="gridOptions" ng-if="data.tasks[vm.index][vm.from].source&&data.tasks[vm.index][vm.to].source"></div>
						<div class="data-area" ng-if="data.tasks[vm.index][vm.from].source&&data.tasks[vm.index][vm.to].source">
							<div class="form-title">
								<h2>其他配置</h2>
							</div>
							<div class="data-form">
								<table cellspacing="0" cellpadding="0">
									<colgroup>
										<col width="120" />
									</colgroup>
									<tbody>
										<tr>
											<td>首次执行策略：</td>
											<td><label class="radio-group"><input type="radio" name="strategy{{vm.index}}" ng-model="data.tasks[vm.index][vm.from].strategy" value="1" />重建目标表</label><label class="radio-group"><input type="radio" name="strategy{{vm.index}}" ng-model="data.tasks[vm.index][vm.from].strategy" value="2" />删除目标表数据</label><label class="radio-group"><input type="checkbox" ng-model="data.tasks[vm.index][vm.from].readSource" />读取已有数据</label></td>
										</tr>
										<tr>
											<td>设置增量识别：</td>
											<td><label class="radio-group"><input type="radio" name="increment{{vm.index}}" ng-model="data.tasks[vm.index][vm.from].increment" value="1" />触发器方式</label><label class="radio-group"><input type="radio" name="increment{{vm.index}}" ng-model="data.tasks[vm.index][vm.from].increment" value="2" />设置增量字段方式</label></td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
						<div class="form-delimiter" ng-class="{'active': vm.compare}">
							<em ng-click="vm.compare=!vm.compare">点击{{vm.compare?'收起':'展开'}}比对规则配置</em>
							<span class="delimiter-arrow" ng-click="vm.compare=!vm.compare"></span>
						</div>
						<div ng-if="vm.compare">
							<div class="data-form data-flex">
								<table cellspacing="0" cellpadding="0">
									<tbody>
										<tr>
											<td><button type="button" class="flex-button" ng-class="{'active': data.tasks[vm.index][vm.from].source}" ng-click="dataSource()"><i class="fa fa-database"></i><em>{{data.tasks[vm.index][vm.from].source||'选择数据源'}}</em></button></td>
											<td><div class="flex-box"><i class="fa fa-globe"></i></div></td>
											<td><button type="button" class="flex-button" ng-class="{'active': data.tasks[vm.index][vm.vs].source}" ng-click="dataCompareSource()"><i class="fa fa-database"></i><em>{{data.tasks[vm.index][vm.vs].source||'选择比对表'}}</em></button></td>
										</tr>
									</tbody>
								</table>
							</div>
							<div class="data-form data-area" ng-if="data.tasks[vm.index][vm.from].table&&data.tasks[vm.index][vm.vs].table">
								<table cellspacing="0" cellpadding="0">
									<tbody>
										<tr>
											<td class="text-align-left">
												<!-- <h3><i class="fa fa-table"></i> 源表：</h3>
												<div class="x-data-types">
													<span class="x-data-type active">表名一</span>
													<span class="x-data-type">表名二</span>
												</div> -->
												<div class="form-title">
													<h2>比对配置</h2>
													<p>请配置 源表：<i class="fa fa-table"></i> <span class="text-info">{{data.tasks[vm.index][vm.from].table}}</span> 和 比对表：<i class="fa fa-table"></i> <span class="text-info">{{data.tasks[vm.index][vm.vs].table}}</span> 之间的映射规则 &nbsp;&nbsp; <span class="x-button" ng-click="addSql()"><i class="fa fa-plus-circle"></i> 添加规则</span></p>
												</div>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
							<div class="x-field-set" ng-if="data.tasks[vm.index][vm.from].table&&data.tasks[vm.index][vm.vs].table">
								<div class="x-field" ng-repeat="(i, sql) in data.tasks[vm.index][vm.vs].sql track by $index">
									<div class="x-field-header">
										<h4><i class="fa fa-flag"></i> 组合规则 &nbsp;&nbsp; <span class="x-button" ng-click="addCriteria(i)"><i class="fa fa-plus-circle"></i><span class="btn-text">添加条件</span></span></h4>
										<div class="x-field-tools">
											<select style="width:72px" ng-if="i != data.tasks[vm.index][vm.vs].sql.length - 1" ng-model="sql.condition"><option value="or">OR</option><option value="and">AND</option><option value="not">NOT</option></select>
											<span class="ico-button" ng-click="removeSql(i)"><i class="fa fa-minus-circle"></i><span class="btn-text">移除</span></span>
										</div>
									</div>
									<div class="x-field-body">
										<div class="x-field" ng-repeat="(m, criteria) in sql.criteria track by $index">
											<div class="x-field-header">
												<h4><i class="fa fa-filter"></i> 比对条件</h4>
												<div class="x-field-tools">
													<select style="width:72px" ng-if="m != 0" ng-model="criteria.condition"><option value="or">OR</option><option value="and">AND</option><option value="not">NOT</option></select>
													<span class="ico-button" ng-if="sql.criteria.length > 1" ng-click="removeCriteria(i, m)"><i class="fa fa-minus-circle"></i><span class="btn-text">移除</span></span>
												</div>
											</div>
											<div class="x-field-body">
												<div class="data-form">
													<table cellspacing="0" cellpadding="0">
														<colgroup>
															<col width="100">
														</colgroup>
														<tbody>
															<tr>
																<td class="x-control">比对字段：</td>
																<td><select ng-model="criteria.field" ng-options="m.name as (m.name + (m.text ? '（' + m.text + '）' : '')) for m in data.tasks[vm.index][vm.vs].fields" required style="width:30%;"><option value="">请选择字段</option></select></td>
															</tr>
															<tr>
																<td class="x-control">源字段：</td>
																<td><select ng-model="criteria.meta" ng-options="m.name as (m.name + (m.text ? '（' + m.text + '）' : '')) for m in data.tasks[vm.index][vm.from].fields" required style="width:30%;"><option value="">请选择源</option></select></td>
															</tr>
															<tr>
																<td></td>
																<td>
																	<div class="x-data-types">
																		<span class="x-data-add" ng-click="setVsRules(i, m)"><i class="fa fa-plus-circle"></i> 数据规则</span>
																		<!-- <span class="x-data-type type-1 active"><em>验</em>规则名称</span>
																		<span class="x-data-type type-3 active"><em>替</em>规则名称</span>
																		<span class="x-data-type type-2 active"><em>比</em>规则名称</span> -->
																		<span class="x-data-type type-{{rule.type}} active" ng-repeat="rule in criteria.rules track by $index"><em>{{rule.type | mapping:vm.fields.types:"id"}}</em>{{rule.name}}</span>
																	</div>
																</td>
															</tr>
														</tbody>
													</table>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- <div class="x-grid-toolbar">
								<h4><i class="fa fa-flag"></i> 规则一</h4>
								<div class="x-grid-tools">
									<select style="width:72px"><option value="or">OR</option><option value="and">AND</option><option value="not">NOT</option></select>
									<span class="ico-button"><i class="fa fa-minus-circle"></i><span class="btn-text">移除</span></span>
								</div>
							</div>
							<div class="x-grid x-grid-auto">
								<span class="ico-button x-grid-toolbar-fixed"><i class="fa fa-plus-circle"></i><span class="btn-text">添加条件</span></span>
								<div class="x-grid-view">
									<div class="x-grid-header">
										<div class="x-grid-header-inner">
											<table cellspacing="0" cellpadding="0">
												<thead>
													<tr>
														<th width="100"><div class="x-grid-inner">连接条件</div></th>
														<th width="300"><div class="x-grid-inner">比对字段</div></th>
														<th width="120"><div class="x-grid-inner">数据类型</div></th>
														<th width="300"><div class="x-grid-inner">源字段</div></th>
														<th width="150"><div class="x-grid-inner">处理方式</div></th>
														<th></th>
													</tr>
												</thead>
											</table>
										</div>
									</div>
									<div class="x-grid-wrap ng-scope">
										<div class="x-grid-body">
											<table cellspacing="0" cellpadding="0">
												<tbody>
													<tr>
														<td class="x-grid-group">
															<table cellspacing="0" cellpadding="0">
																<tbody>
																	<tr>
																		<td width="100"></td>
																		<td width="300">
																			<div class="x-grid-inner">name <span class="text-info">（中文名）</span></div>
																		</td>
																		<td width="120">
																			<div class="x-grid-inner">int</div>
																		</td>
																		<td width="300">
																			<div class="x-grid-inner"><select ng-model="data.meta" ng-options="m.name as (m.name + (m.text ? '（' + m.text + '）' : '')) for m in data.tasks[vm.index][vm.from].fields" required><option value="">请选择源</option></select></div>
																		</td>
																		<td width="150">
																			<div class="x-grid-inner"><span class="btn-label">数据规则</span></div>
																		</td>
																		<td></td>
																	</tr>
																</tbody>
															</table>
															<div class="x-field-group">
																<div class="x-field">
																	<div class="x-field-header">
																		<h4><label><i class="fa fa-info-circle"></i> 当前规则</label></h4>
																	</div>
																	<div class="x-field-body">
																		<div class="x-tag-affix">
																			<ul>
																				<li class="affix-1"><em>转</em>规则名称</li>
																				<li class="affix-2"><em>验</em>规则名称</li>
																			</ul>
																		</div>
																	</div>
																</div>
															</div>
														</td>
													</tr>
													<tr>
														<td class="x-grid-group">
															<table cellspacing="0" cellpadding="0">
																<tbody>
																	<tr>
																		<td width="100">
																			<div class="x-grid-inner"><select style="width:72px"><option value="or">OR</option><option value="and">AND</option><option value="not">NOT</option></select></div>
																		</td>
																		<td width="300">
																			<div class="x-grid-inner">name <span class="text-info">（中文名）</span></div>
																		</td>
																		<td width="120">
																			<div class="x-grid-inner">int</div>
																		</td>
																		<td width="300">
																			<div class="x-grid-inner"><select ng-model="data.meta" ng-options="m.name as (m.name + (m.text ? '（' + m.text + '）' : '')) for m in data.tasks[vm.index][vm.from].fields" required><option value="">请选择源</option></select></div>
																		</td>
																		<td width="150">
																			<div class="x-grid-inner"><span class="btn-label">数据规则</span></div>
																		</td>
																		<td></td>
																	</tr>
																</tbody>
															</table>
														</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div> -->
						</div>
					</div>
				</div>
				<div class="x-group">
					<div class="x-group-header">
						<h3>任务设置</h3>
					</div>
					<div class="x-group-body">
						<div class="data-form">
							<table cellspacing="0" cellpadding="0">
								<colgroup>
									<col width="100" />
								</colgroup>
								<tbody>
									<tr>
										<td>读取方式：</td>
										<td><label class="radio-group"><input type="radio" name="type" ng-model="data.type" />全量</label><label class="radio-group"><input type="radio" name="type" ng-model="data.type" />增量</label></td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
				<div class="x-group">
					<div class="x-group-header">
						<h3>定时设置</h3>
					</div>
					<div class="x-group-body">
						<div class="data-form">
							<table cellspacing="0" cellpadding="0">
								<colgroup>
									<col width="100" />
								</colgroup>
								<tbody>
									<tr>
										<td>任务类型：</td>
										<td><label class="radio-group"><input type="radio" name="type" class="x-radio" ng-model="data.time.type" ng-value="1" ng-init="data.time.type=data.time.type||'1'">实时任务</label><label class="radio-group"><input type="radio" name="type" class="x-radio" ng-model="data.time.type" ng-value="2">定时任务</label><label class="radio-group"><input type="radio" name="type" class="x-radio" ng-model="data.time.type" ng-value="3">执行一次</label></td>
									</tr>
									<tr>
										<td>任务频率：</td>
										<td>
											<div class="form-field-auto">
												<p>
													<label for="">间隔：</label>&nbsp;&nbsp;<input type="number" ng-model="data.time.interval" class="x-ipt" value="1" />&nbsp;&nbsp;<select ng-model="data.time.cycle" ng-init="data.time.cycle=data.time.cycle||'day'"><option value="day">天</option><option value="week">周</option><option value="month">月</option></select>
												</p>
												<p>
													<label class="radio-group"><input type="radio" ng-model="data.time.model" ng-value="1" />执行一次时间为：</label><input type="text" class="x-ipt" value="hh:mm:ss" ng-disabled="data.time.model=='2'" />
												</p>
												<p>
													<label class="radio-group"><input type="radio" ng-model="data.time.model" ng-value="2" />执行间隔：</label><input type="number" class="x-ipt" ng-value="1" ng-disabled="data.time.model=='1'" />&nbsp;&nbsp;<select name="" id="" ng-disabled="data.time.model=='1'"><option value="">小时</option><option value="">分</option><option value="">秒</option></select>&nbsp;&nbsp;<label>开始时间：<input type="text" ng-model="data.time.startTime" class="x-ipt x-ipt-date" placeholder="开始时间" datetime /></label>&nbsp;&nbsp;<label>结束时间：<input type="text" ng-model="data.time.endTime" class="x-ipt x-ipt-date" placeholder="开始时间" datetime /></label>
												</p>
											</div>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
			<div class="x-data-panel-footer">
				<div class="fl">
					<button class="dialog-button color-success" type="submit" ng-disabled="formDisabled" ng-click="data.type=1">运行测试</button>
				</div>
				<div class="fr"><button class="dialog-button cancel-button" type="button" ng-click="close(false)">取消</button><button class="dialog-button" type="submit" ng-disabled="formDisabled" ng-click="data.type=2">暂存任务</button><button class="dialog-button" type="submit" ng-disabled="formDisabled">提交任务</button></div>
			</div>
		</div>
	</form>
</div>